<template>
	<view class="collageList" >
		<view class="navigation" :class="[hasBg?'hasBg':'']">
			<image src="/static/images/collage/collage-back.png" class="collage-back" @click="back()" mode=""></image>
			<view class="navigation-title">拼团列表</view>
		</view>
		<view class="collageDetailGodds" v-if="product">
			<view class="collages-goods-list-item">
				<image :src="product.cover_url" class="goods-icon" mode=""></image>
				<view class="collages-goods-list-item-right">
					<view class="goods-describe">{{ product.title }}</view>
					<view class="goods-other-lable">
						<image src="/static/images/collage/free-post.png" v-if="product.is_sf" class="free-post" mode=""></image>
						<image src="/static/images/collage/product-hangkong.png" v-if="product.is_hongkong_direct" class="free-post" mode=""></image>
						<image src="/static/images/collage/product-hangkong.png" v-if="product.is_overseas_direct" class="free-post" mode=""></image>
						<image src="/static/images/collage/high-recommend.png" v-if="product.is_pop" class="high-recommend" mode=""></image>
					</view>
					<view class="deliver-goods-address"></view>
					<view class="goods-num-info">
						<view class="goods-money">
							<text>￥</text>
							<text>{{ product.price_lowest }}</text>
						</view>
						<view class="goods-solded-num">已售{{ product.sold_count }}件</view>
					</view>
				</view>
			</view>
		</view>
		<view class="can-join-collage">
			<view class="can-join-collage-title">可参与的团</view>
			<view class="can-join-collage-list">
				<view class="can-join-collage-list-item" v-for="(item,index) in pageItems" :key="index" @click="goCollageDetail(item.id)">
					<view class="left">
						<view class="userimg-box">
							<image :src="item.user?item.user.avatar_url:item.machine_user.avatar_url"  class="userimg" mode=""></image>
							<image src="/static/images/collage/recommender.png" v-if="item.user&&item.user.id == user.parent_id" class="recommender" mode=""></image>
						</view>
						<view class="user-name">{{ item.user?item.user.name:item.machine_user.name }}</view>
					</view>
					<view class="right">
						<view>
							<view>
								还差<text style="margin:0 5rpx;">{{ item.group_amount - item.attend_users.length }}人</text>成团
							</view>
							<!-- <view v-if="item.end_times">
								剩余<uni-countdown :show-day="false" :hour="item.end_times.h" :minute="item.end_times.m" :second="item.end_times.s" color="#999999" splitorColor="#999999"></uni-countdown>
							</view> -->
						</view>
						<view  @click.stop="attendGroups(item.id)" v-if="!item.my_attend">去参团</view>
						<view  @click="goCollageDetail(item.id)" class="attended" v-if="item.my_attend">已参团</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-more" v-if="pageHasNoMore">
		  --- 没有更多数据了 ---
		</view>
		<product-large-sku-cover-com></product-large-sku-cover-com>
		<uni-popup ref="buypopup" type="bottom">
			<view class="buy-content">
				<view class="content">
					<product-selected-sku-com></product-selected-sku-com>
		
					<product-attribute-selector-com v-if="hasAttribute" class="selector-com"></product-attribute-selector-com>
					<product-sku-selector-com v-else class="selector-com"></product-sku-selector-com>
		
					<!-- <product-selected-sku-count-com></product-selected-sku-count-com> -->
		
					<view class="submit">
						<button class="button" plain="true" @click="submitOrder">确认参团</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from "store"
	import { mapGetters,mapActions,mapMutations } from 'vuex'
	import { getGoodsGroupsList,attendGroups } from 'api/collageApi'
	import Pagination from "mixins/Pagination"
	import CurrentUser from "mixins/CurrentUser"
	import ProductLargeSkuCoverCom from "components/product/purchase/ProductLargeSkuCoverCom"
	import ProductSelectedSkuCom from "components/product/purchase/ProductSelectedSkuCom"
	import ProductAttributeSelectorCom from "components/product/purchase/ProductAttributeSelectorCom"
	import ProductSelectedSkuCountCom from "components/product/purchase/ProductSelectedSkuCountCom"
	import ProductSkuSelectorCom from "components/product/purchase/ProductSkuSelectorCom"
	export default {
		store,
		mixins:[
			Pagination,
			CurrentUser
		],
		components: {
			ProductLargeSkuCoverCom,
			ProductSelectedSkuCom,
			ProductSkuSelectorCom,
			ProductAttributeSelectorCom,
			ProductSelectedSkuCountCom
		},
		data(){
			return {
				collageGoodsList:[],
				groupsNum:0,
				hasBg:false
			}
		},
		computed: {
			...mapGetters([
				'product',
				'user',
				'isLogin',
				'hasAttribute',
				'selectedSku'])
		},
		methods:{
			...mapMutations(['setGroupId']),
			back(){
				uni.navigateBack({})
			},
			goCollageDetail(id){
				uni.navigateTo({url: '/packs/pages/collageDetail/collageDetail?id=' + id})
			},
			getGoodsGroupsList(){
				let id = this.product_id;
				getGoodsGroupsList(id).then(res=>{
					let list = res.data;
					this.groupsNum = res.meta.total;
					this.collageGoodsList = list;
					this.init()
				})
			},
			async loadPageItems() {
				let id = this.product_id;
				let list = await getGoodsGroupsList(id,{page: this.pageNumber})
				this.init(list)
				return this.collageGoodsList;
			},
			attendGroups(group_id){
				
				let parms = {
					product_id:this.product.product_id,
					group_id:group_id
				}
				attendGroups(parms).then(res=>{
					this.setGroupId(group_id)
					this.openBuyPanel()
				})
			},
			async openBuyPanel() {
				if (await this.isLogin) {
					// 创建订单底部弹框
					this.$refs.buypopup.open('bottom')
				} else {
					uni.navigateTo({
						url: '/packs/pages/auth/auth?from=product'
					})
				}
			},
			async submitOrder() {
				if (await this.isLogin) {
					if (this.selectedSku) {
						uni.navigateTo({
							url: `/packs/pages/order/confirm?needBrokerage=false`
						})
						this.$refs.buypopup.close()
					} else {
						uni.showToast({
							title: '请选择规格',
							mask: true,
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
					}
				} else {
					uni.redirectTo({
						url: '/packs/one/pages/auth/auth'
					})
				}
			},
			init(list) {
				var date = new Date().getTime();
				let collageGoodsList = list;
				collageGoodsList.data.forEach((item, index) => {
					let end_time = new Date(item.created_at.replace(/-/g, '/')).getTime() + 24*60*60*1000;
					var leftTime = end_time - date; //计算两日期之间相差的毫秒数
					if (leftTime >= 0) {
						let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
						let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
						let m = Math.floor(leftTime / 1000 / 60 % 60);
						let s = Math.floor(leftTime / 1000 % 60);
						item.end_times = {
							d: d,
							h: h,
							m: m,
							s: s
						}
					}
				})
				this.collageGoodsList = collageGoodsList;
			}
		},
		async onLoad(options) {
			this.product_id = options.id;
		},
		async onShow(){
			this.pageNumber = 1
			this.pageItems = []
			this.pageHasNoMore = false
			await this.loadPageData()
		},
		onPageScroll(e){
			if(e.scrollTop>10){
				this.hasBg = true
			}else{
				this.hasBg = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.hasBg{
		background: #FFE3D5;
	}
	.collage-back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.collageDetailGodds{
		width:100%;
		height: 358rpx;
		padding-top: 120rpx;
		background: linear-gradient(180deg, #FFE3D5 0%, rgba(255, 227, 213, 0) 100%);
	}
	.collages-goods-list-item{
		width: 686rpx;
		height: 232rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin:0 auto 16rpx;
		display: flex;
		position: relative;
		.goods-icon{
			display:block;
			width: 232rpx;
			height: 232rpx;
			border-radius: 32rpx 0px 0px 32rpx;
		}
		.collages-goods-list-item-right{
			margin:16rpx 0 0 24rpx;
		}
		.goods-describe{
			width: 406rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.goods-other-lable{
			display: flex;
			height: 30rpx;
			align-items: center;
			margin-top: 4rpx;
		}
		.free-post,.high-recommend{
			display: block;
			width: 102rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
		.deliver-goods-address{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			height: 34rpx;
			line-height: 34rpx;
			margin-top: 4rpx;
		}
		.goods-num-info{
			display: flex;
		}
		.goods-money{
			>text:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #FF4416;
				line-height: 34rpx;
			}
			>text:nth-child(2){
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4416;
				line-height: 50rpx;
			}
		}
		.goods-solded-num{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin:12rpx 0 0 24rpx;
		}
	}
	.can-join-collage{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: -100rpx auto;
	}
	.can-join-collage-title{
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		padding: 32rpx 0 40rpx 32rpx;
	}
	.can-join-collage-list{
		>view:nth-last-child(1){
			border: none;
		}
	}
	.can-join-collage-list-item{
		display: flex;
		justify-content: space-between;
		width: 622rpx;
		margin: 0 auto 30rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #F0F0F0;
		.left{
			display: flex;
			align-items: center;
			.userimg-box{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				position: relative;
				.userimg{
					display: block;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}
				.recommender{
					display: block;
					width: 48rpx;
					height: 26rpx;
					position: absolute;
					left:38rpx;
					top:-12rpx;
				}
			}
			.user-name{
				width:180rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-left: 14rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
		.right{
			display: flex;
			>view:nth-child(1){
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
				>view:nth-child(1){
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					>text{
						font-size: 28rpx;
						font-weight: 600;
						color: #F64646;
						line-height: 40rpx;
					}
				}
				>view:nth-child(2){
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
			}
			>view:nth-child(2){
				width: 158rpx;
				height: 64rpx;
				background: linear-gradient(90deg, #F5724F 0%, #FE3B41 100%);
				border-radius: 16rpx;
				ont-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 24rpx;
			}
			.attended{
				background: #F0F0F0!important;
				color:#999999!important;
				font-weight: 400!important;
			}
		}
		
	}
	
	/deep/.uni-countdown__splitor{
		margin:0!important;
	}
	/deep/.uni-countdown__number{
		width:30rpx!important;
		font-size:24rpx!important;
	}
	
	.no-more {
		margin-top: 80rpx;
	  width: 100%;
	  font-size: 24rpx;
	  text-align: center;
	  color: #cccccc;
		line-height: 150rpx;
	}
	.buy-content {
		background: white;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.content {
			width: 710rpx;
			margin: 20rpx auto;
			.submit {
				.button {
					width: 560rpx;
					height: 70rpx;
					line-height: 70rpx;
					background: linear-gradient(138deg, #FFDF63 0%, #FEBF05 100%);
					// background: linear-gradient(180deg, #FF77A6 0%, #FF3E42 100%);
					border: none;
					border-radius: 52rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
		}
	}
	.selector-com{
		margin-bottom: 20rpx;
	}
	
</style>
